<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>智能巡检车数据分析平台</title>
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">

    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="demo.css">
    <script type="text/javascript" src="static/js/jquery-1.8.0.min.js"></script>

</head>

<body>
    <header>
        智能巡检车数据分析平台
        <span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
    </header>
    <div id="content">
        <div class="content_left">
            <div class="dtuplc">
                <div class="dtu">
                    <div id="container" style="height: 100%;"></div>
                </div>
                <div class="plc">
                    <div id="container1" style="height: 100%"></div>
                </div>
            </div>
            <!--
                	DTU和PLC完
                -->
            <div class="online">
                <div class="title"><img src="static/picture/icon01.png" /> 登录</div>

                <div class="online_con" id="container1">
                    <input type="text" class="Input" id="Ip" placeholder="Ip地址">
                    <input type="text" class="Input" id="username" placeholder="用户名">
                    <input type="password" class="Input" id="password" placeholder="密码">
                    <div>
                        <button type="button" id="btns10" class="btn btn-primary btn-lg" onclick="clickLogin();">登录</button>
                        <button type="button" id="btns10" class="btn btn-primary btn-lg" style="float: right;" onclick="clickLogout();">退出</button>
                    </div>
                </div>
            </div>
            <div class="industry">
                <div class="title"><img src="static/picture/icon01.png" /> 云台控制</div>
                <div class="online_con" id="container2">
                    <table cellpadding="0" cellspacing="3" border="0" class="left" style="float: left;">
                        <tr>
                            <td>
                                <button type="button" id="btn1" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();"><img src="./img/左上.png" style="width: 55px;height: 55px; padding-right: 10px;" alt=""></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();"><img src="./img/上.png" style="width: 55px;height: 55px;padding-right: 10px;"></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();"><img src="./img/右上.png" style="width: 55px;height: 55px;padding-right: 10px;"></button>
                            </td>
                        </tr>
                        <tr>
                            <td class="dong">
                                <button type="button" id="btn1" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();"><img src="./img/左.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onclick="mouseDownPTZControl(9);UpSrc();"><img id="src" src="./img/云台中心.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();"><img src="./img/右.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" id="btn1" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();"><img src="./img/左下.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();"><img src="./img/下.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                                <button type="button" id="btn" class="btn btn-primary btn-lg" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();"><img src="./img/右下.png" style="width: 55px;height: 55px; padding-right: 10px;"></button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="content_center">
            <div class="center_top">
                <div class="title"><img src="static/picture/icon03.png" /> 平台监控</div>
                <div id="divPlugin" class="plugin" style="width: 1050px; height: 550px;"></div>
                <!-- <div class="center_top_con" id="distribution_map">
                </div> -->
            </div>
            <div class="center_bot">
                <table class="panel-table" bordercolor="#0d48e0" border="1">
                    <thead bgcolor="#0e4ae0" align="center">
                        <tr height="40">
                            <th colspan="6"><img src="static/picture/icon04.png" /> 监控列表</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="aaa" align="center">
                            <td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
                        </tr>
                        <tr v-for="y in factory.slice(0,6)" class="aaa" style="font-size: 16px;" align="center">
                            <td>{{ y.company }}</td>
                            <td>{{ y.dtuCnt }}</td>
                            <td>{{ y.plcCnt }}</td>
                            <td>{{ y.dataCnt }}</td>
                            <td>{{ y.alarm }}</td>
                            <td width="250">
                                <button class="b1 click_pop">日志</button>
                                <button class="b2 click_pop2" style="width: 90px;">本地配置</button>
                                <!-- <button class="b3 click_pop3">操作</button> -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="content_right">
            <div class="report">
                <div class="report1" style="width: 140;height: 500;">
                    <p>告警信息</p>
                    <small>{{alarm.alarm}}条</small>
                </div>
                <div class="report2">
                    <p>故障信息</p>
                    <small>{{alarm.fault}} 条</small>
                </div>
            </div>
            <div class="news_report">
                <div class="title"><img src="static/picture/icon05.png" /> 预览操作</div>
                <div class="news_list">
                    <!-- <ul>
                        <li v-for="item in almMsg.slice(0,3)" class="li02">
                            {{ item.msg }}
                        </li>
                    </ul> -->
                    <table cellpadding="0" cellspacing="3" border="0">
                        <tr>
                            <td>
                                <button type="button" id="btns" class="btn btn-primary btn-lg" onclick="clickStartRealPlay();">开始预览</button>
                                <button type="button" id="btns2" class="btn btn-primary btn-lg" onclick="clickStopRealPlay();">停止预览</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                分辨率：<input id="resolutionWidth" type="text" class="txt" /> x <input id="resolutionHeight" type="text" class="txt" />
                                <button type="button" id="btns" class="btn btn-primary btn-lg" onclick="clickDeviceCapturePic();">设备抓图</button>
                                <button type="button" id="btns2" class="btn btn-primary btn-lg" onclick="clickCapturePic();">抓图</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <input type="button" id="btns" class="btn btn-primary btn-lg" value="开始录像" onclick="clickStartRecord('realplay');" />
                                <input type="button" id="btns2" class="btn btn-primary btn-lg" value="停止录像" onclick="clickStopRecord('realplay');" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="data_box">
                <div class="title"><img src="static/picture/icon06.png" /> 图像控制</div>
                <div class="data_con" id="container4">
                    <table cellpadding="0" cellspacing="3" border="0" class="right">
                        <tr>
                            <td>
                                <a class=" white">变倍</a>
                                <input class="btn btn-primary btn-lg" id="btns3" value="+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()" type="button">
                                <input class="btn btn-primary btn-lg " id="btns3" value="-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()" type="button">
                            </td>
                        </tr>
                        <tr>
                            <td>

                                <a class=" white">变焦</a>
                                <input class="btn btn-primary btn-lg" id="btns3" value="+" onmousedown="PTZFocusIn()" onmouseup="PTZFoucusStop()" type="button">
                                <input class="btn btn-primary btn-lg" id="btns3" value="-" onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()" type="button">
                            </td>
                        </tr>
                        <tr>
                            <td>

                                <a class=" white">光圈</a>
                                <input class="btn btn-primary btn-lg" id="btns3" value="+" onmousedown="PTZIrisIn()" onmouseup="PTZIrisStop()" type="button">
                                <input class="btn btn-primary btn-lg " id="btns3" value="-" onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()" type="button">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--遮罩层-->
    <div class="bgPop"></div>
    <!--弹出框-->
    <div class="pop">
        <div class="pop-top">
            历史记录
            <span class="pop-close">Ｘ</span>
        </div>
        <div class="pop-content">

            <fieldset class="operate">
                <legend>操作信息</legend>
                <div id="opinfo" class="opinfo"></div>
            </fieldset>
            <fieldset class="callback">
                <legend>事件回调信息</legend>
                <div id="cbinfo" class="cbinfo"></div>
            </fieldset>
            <tr>

                <td class="tt">已登录设备</td>
                <td>
                    <select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
                </td>
                <td class="tt">通道列表</td>
                <td>
                    <select id="channels" class="sel"></select>
                </td>

            </tr>
        </div>
        <div class="pop-foot">
            <input type="button" value="确定" class="pop-cancel pop-close">
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.pop-close').click(function() {
                $('.bgPop,.pop').hide();
            });
            $('.click_pop').click(function() {
                $('.bgPop,.pop').show();
            });
        })
    </script>
    <!--遮罩层-->
    <div class="bgPop2"></div>
    <!--弹出框-->
    <div class="pop2">
        <div class="pop-top">
            本地配置
            <span class="pop-close">Ｘ</span>
        </div>
        <div class="pop-content">
            <fieldset class="localconfig">
                <legend>本地配置</legend>
                <table cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td class="tt">播放性能</td>
                        <td>
                            <select id="netsPreach" name="netsPreach" class="sel">
                            <option value="0">最短延时</option>
                            <option value="1">实时性好</option>
                            <option value="2">均衡</option>
                            <option value="3">流畅性好</option>
                        </select>
                        </td>
                        <td class="tt">图像尺寸</td>
                        <td>
                            <select id="wndSize" name="wndSize" class="sel">
                            <option value="0">充满</option>
                            <option value="1">4:3</option>
                            <option value="2">16:9</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">规则信息</td>
                        <td>
                            <select id="rulesInfo" name="rulesInfo" class="sel">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                        </td>
                        <td class="tt">抓图文件格式</td>
                        <td>
                            <select id="captureFileFormat" name="captureFileFormat" class="sel">
                            <option value="0">JPEG</option>
                            <option value="1">BMP</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">录像文件打包大小</td>
                        <td>
                            <select id="packSize" name="packSize" class="sel">
                            <option value="0">256M</option>
                            <option value="1">512M</option>
                            <option value="2">1G</option>
                        </select>
                        </td>
                        <td class="tt">协议类型</td>
                        <td>
                            <select id="protocolType" name="protocolType" class="sel">
                            <option value="0">TCP</option>
                            <option value="2">UDP</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">录像文件保存路径</td>
                        <td colspan="3"><input id="recordPath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('recordPath', 0);" /></td>
                    </tr>
                    <tr>
                        <td class="tt">回放下载保存路径</td>
                        <td colspan="3"><input id="downloadPath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('downloadPath', 0);" /></td>
                    </tr>
                    <tr>
                        <td class="tt">预览抓图保存路径</td>
                        <td colspan="3"><input id="previewPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('previewPicPath', 0);" /></td>
                    </tr>
                    <tr>
                        <td class="tt">回放抓图保存路径</td>
                        <td colspan="3"><input id="playbackPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('playbackPicPath', 0);" /></td>
                    </tr>
                    <tr>
                        <td class="tt">回放剪辑保存路径</td>
                        <td colspan="3"><input id="playbackFilePath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('playbackFilePath', 0);" /></td>
                    </tr>
                    <tr>
                        <td class="tt">设备抓图保存路径</td>
                        <td colspan="3"><input id="devicePicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="浏览" onclick="clickOpenFileDlg('devicePicPath', 0);" /></td>
                    </tr>
                    <tr>
                        <td colspan="4"><input type="button" class="btn btn-primary btn-lg" value="获取" onclick="clickGetLocalCfg();" />&nbsp;<input type="button" class="btn btn-primary btn-lg" value="设置" onclick="clickSetLocalCfg();" /></td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div class="pop-foot">
            <input type="button" value="确定" class="pop-cancel pop-close">
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.pop-close').click(function() {
                $('.bgPop2,.pop2').hide();
            });
            $('.click_pop2').click(function() {
                $('.bgPop2,.pop2').show();
            });
        })
    </script>
    <!--遮罩层-->
    <div class="bgPop3"></div>

    <script>
        $(document).ready(function() {
            $('.pop-close').click(function() {
                $('.bgPop3,.pop3').hide();
            });
            $('.click_pop3').click(function() {
                $('.bgPop3,.pop3').show();
            });
        })
    </script>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/echarts.min.js"></script>
    <script type="text/javascript" src="static/js/china.js"></script>
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <script type="text/javascript" src="static/js/map.js"></script>
    <script type="text/javascript" src="static/js/times.js"></script>
    <script type="text/javascript" src="static/js/dtu.js"></script>
    <script type="text/javascript" src="static/js/plc.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <script src="./demo.js"></script>
    <script src="./webVideoCtrl.js"></script>

</body>

</html>